import * as React from "react";
import { Button, DatePicker, message } from "antd";
import SelectDevice from "../SelectDevice";
import moment from "moment";
import "./index.less";
const RangePicker:any= DatePicker.RangePicker;

export interface DtPowerConditionProps {
  chooseDevice: (device: DtPowerDevice) => any;
  query: (param: DtPowerParam) => any;
}

export interface DtPowerState {}

export interface DtPowerDevice {
  deviceId: number | null;
  no: string | null;
  name: string | null;
  devAddr: string | null;
}

export interface DtPowerParam {
  deviceId: number | null;
  endTime: number | null;
  startTime: number | null;
}

class DtPowerCondition extends React.Component<
  DtPowerConditionProps,
  DtPowerState
> {
  private device: DtPowerDevice = {
    deviceId: null,
    no: null,
    name: null,
    devAddr: null,
  };
  private param: DtPowerParam = {
    deviceId: null,
    endTime: null,
    startTime: null,
  };

  render() {
    return (
      <div className="dtPowerCondition">
        <div className="bare_body" style={{ padding: 16, paddingTop: 0 }}>
          选择设备：
          <SelectDevice
            energyType="1"
            style={{ width: 120, marginRight: 15 }}
            onSelect={(device: any) => {
              this.onDeviceChange(device);
            }}
          />
          选择日期：
          <div className="changeType_btn d_inlineFlex">
            <RangePicker
              onChange={(dates) => {
                this.onDateChange(dates);
              }}
            />
          </div>
          <Button
            type="primary"
            className="l_distance"
            onClick={() => {
              this.query();
            }}
          >
            查询
          </Button>
        </div>
      </div>
    );
  }

  onDateChange(dates) {
    let start: number | null = null;
    let end: number | null = null;
    if (dates) {
      start = moment(dates[0]).startOf("day").valueOf();
      end = moment(dates[1]).endOf("day").valueOf();
    }
    this.param.startTime = start;
    this.param.endTime = end;
  }

  //选择设备
  onDeviceChange(device: any) {
    this.device = {
      deviceId: device.id,
      no: device.no,
      name: device.name,
      devAddr: device.devAddr,
    };
    this.props.chooseDevice(this.device);
  }

  //查询
  query() {
    if (!this.device.deviceId) {
      message.info("请选择设备！");
      return;
    }
    if (!this.param.startTime || !this.param.endTime) {
      message.info("请选择时间！");
      return;
    }
    this.param.deviceId = this.device.deviceId;

    this.props.query(this.param);
  }
}

export default DtPowerCondition;
